<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "focus-item",
});
</script>
<script setup lang="ts">
import { reactive, ref, withDefaults, toRefs } from "vue";
import { Router } from "@/utils/router";
import ImageItem from "@/components/image/image-item.vue";
import { Account } from "@/utils/account";
type dataType = {
  type: number;
  data: any;
};
const props = withDefaults(defineProps<dataType>(), {
  data: {},
  type: 0,
});
const emit = defineEmits(["love"]);
const toProduct = (id: string) => {
  Account.checkLogin((isLogin) => {
    Router.navigateToOrRedirectTo(
      isLogin,
      `/package/famous-talk/pages/detail/index?id=${id}`
    );
  });
};
</script>

<template>
  <view class="focusWrap" v-if="type===1">
    <view class="imageWrap">
      <ImageItem
        :src="data.pic_url"
        width="120rpx"
        height="120rpx"
        border="2rpx solid #f1f1f1"
        borderDadius="50%"
      />
    </view>
    <view class="contentWrap">
      <view class="line1">
        <view class="name">{{data.name}}</view>
        <view class="tip">{{data.guider_rank}}</view>
      </view>
      <view class="line2">
        <text class="course">{{data.score}}分</text>
        <text class="serve">已服务{{data.service_num}}次</text>
      </view>
      <view class="line3"> {{data.intro}} </view>
    </view>
    <view class="end">
      <view class="focus"> 已关注 </view>
      <!-- <view class="focus focus2">
        <image src="/package/my-fans-follow/static/focu1.png" mode="scaleToFill" />
        <text class="active">关注</text>
      </view> -->
      <!-- <view class="focus focus3">
        <image
          src="/package/my-fans-follow/static/focu2.png"
          mode="scaleToFill"
        />
        <text>互相关注</text>
      </view> -->
    </view>
  </view>
  <view class="focusWrap" v-if="type===2">
    <view class="imageWrap">
      <ImageItem
        :src="data.pic_url"
        width="120rpx"
        height="120rpx"
        border="2rpx solid #f1f1f1"
        borderDadius="50%"
      />
    </view>
    <view class="contentWrap">
      <view class="line1">
        <view class="name name2">
          {{data.name}}</view
        >
      </view>
      <view class="line2">
        <text class="course">{{data.score}}分</text>
        <text class="serve">已服务{{data.service_num}}次</text>
      </view>
      <view class="line3"> {{data.intro}} </view>
    </view>
    <view class="end">
      <view class="focus"> 已关注 </view>
      <!-- <view class="focus focus2">
        <image src="/package/my-fans-follow/static/focu1.png" mode="scaleToFill" />
        <text class="active">关注</text>
      </view> -->
      <!-- <view class="focus focus3">
        <image
          src="/package/my-fans-follow/static/focu2.png"
          mode="scaleToFill"
        />
        <text>互相关注</text>
      </view> -->
    </view>
  </view>
  <view class="focusWrap" v-if="type===3">
    <view class="imageWrap">
      <ImageItem
        :src="data.head_img"
        width="120rpx"
        height="120rpx"
        border="2rpx solid #f1f1f1"
        borderDadius="50%"
      />
    </view>
    <view class="contentWrap contentWrap2">
      <view class="line1">
        <text class="name">{{data.nick_name}}</text>
      </view>
      <view class="line3"> {{data.intro}} </view>
    </view>
    <view class="end">
       <view class="focus focus3" v-if="data.is_follow">
        <image
          src="/package/my-fans-follow/static/focu2.png"
          mode="scaleToFill"
        />
        <text>互相关注</text>
      </view>
      <view class="focus" v-else> 已关注 </view>
      <!-- <view class="focus focus2">
        <image src="/package/my-fans-follow/static/focu1.png" mode="scaleToFill" />
        <text class="active">关注</text>
      </view> -->
     
    </view>
  </view>
</template>

<style lang="scss">
@import "/src/styles/mixins.scss";
.focusWrap {
  margin-bottom: 20rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;

  height: 160rpx;
  background: #ffffff;
  border-radius: 20rpx;
}
.imageWrap {
  flex-shrink: 0;
  width: 120rpx;
}
.contentWrap {
  flex-grow: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.name {
  @include lineLimit(1);
  font-size: 30rpx;
  color: #333333;
  line-height: 42rpx;
  font-weight: bold;
}
.tip {
  height: 20rpx;
  margin-left: 20rpx;
  padding: 8rpx 12rpx;
  background: rgba($color: #ff5c1d, $alpha: 0.05);
  border-radius: 8rpx;

  font-size: 20rpx;
  color: #ff5c1d;
  line-height: 20rpx;
}
.course {
  font-size: 24rpx;
  color: #0bc6b2;
  line-height: 34rpx;
}
.serve {
  margin-left: 20rpx;
  font-size: 24rpx;
  color: #999999;
  line-height: 34rpx;
}
.line1 {
  width: 100%;
  display: flex;
  align-items: center;
  .name2 {
    width: 300rpx;
    @include lineLimit(1);
  }
}
.line3 {
  @include lineLimit(1);
  font-size: 24rpx;
  color: #666666;
  line-height: 44rpx;
}
.end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .focus2 {
    border: 2rpx solid #ff7900 !important;
  }
  .focus3 {
    width: 184rpx !important;
  }
  .focus {
    @include center();
    width: 132rpx;
    height: 52rpx;
    border: 2rpx solid #e5e5e5;
    border-radius: 28rpx;
    text-align: center;
    font-size: 28rpx;
    color: #999999;
    line-height: 52rpx;
    .active {
      font-size: 28rpx;
      color: #ff7900;
      line-height: 40rpx;
    }
  }
  image {
    margin-right: 10rpx;
    width: 28rpx;
    height: 28rpx;
  }
}
.contentWrap2 {
  justify-content: flex-start !important;
  .line3 {
    margin-top: 10rpx;
  }
}
</style>
